<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Result</title>
    <link href="../css/layui.css" rel="stylesheet">
    <link href="../css/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/result.css" rel="stylesheet">
</head>
<body>
<div class="head layui-row">
    <div class="layui-col-xs6">
        <a href="../index.html">
            <img src="../images/logo.png" id="logo"/>
        </a>
    </div>
    <div class="layui-col-xs6" style="text-align: right">
        <div class="search-box">
            <input id="search" placeholder="Search"/>
            <i class="icon-search"></i>
            <i class="icon-add-paper"></i>
            <i class="icon-setting"></i>
            <label id="username">Ttmny</label>
        </div>
    </div>
</div>
<div class="main-container" id="box">
    <div class="main-box">
        <div class="tip-box">
            <div class="tip-title">
                <label>Newly Build</label>
                <input placeholder="Input File Name" class="title-input">
            </div>
            <div class="tip-body">
                <div class="layui-row tab-row">
                    <div class="main-box">
                        <div class="layui-tab layui-tab-card tip-box">
                            <i class="fa fa-chevron-up" onclick="hideContent(this)"></i>
                            <ul class="layui-tab-title">
                                <li class="layui-this">Model Selection</li>
                                <li>Selection Index</li>
                                <li>Prediction And Evalution</li>
                            </ul>
                            <div class="layui-tab-content" style="height: auto;">
                                <div class="layui-tab-item layui-show">
                                    <div style="width: 200px;">
                                        <select class="select-item">
                                            <option value="">Regression</option>
                                            <option value="">Clustering</option>
                                            <option value="">Classifiction</option>
                                            <option value="">Evaluation</option>
                                            <option value="">Online learning</option>
                                        </select>
                                    </div>
                                    <!--<div>
                                        <input id="date1" class="layui-input" type="text">
                                    </div>-->
                                    <div class="label-box">
                                        <label>Algorithm Selection</label>
                                        <i class="fa fa-minus" style="margin-left: 30px;"></i>
                                    </div>
                                    <div class="checkbox-box layui-form">
                                        <ul class="layui-form-item">
                                            <li>
                                                <input type="checkbox" title="Linear Regression" lay-skin="primary"
                                                       checked>
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Nonlinear Regression" lay-skin="primary"
                                                       checked>
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Lasso" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Ridge" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="SVM" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Cart" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Random Forest" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Stepwise" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="GBDT" lay-skin="primary">
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="date-box">
                                        <div>
                                            <div class="title">Time Slot</div>
                                            <input class="input-time" type="text" id="date1">
                                            <input class="input-time" type="text" id="date2">
                                        </div>
                                        <div>
                                            <div class="title">Predicted Days</div>
                                            <input class="input-time" type="text" id="date3">
                                            <input class="input-time" type="text" id="date4">
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-tab-item">
                                    <div style="width: 200px;">
                                        <select class="select-item" style="width: 100%">
                                            <option value="">Ready-to-use-Data</option>
                                            <option value="">Ready-to-use-Data</option>
                                        </select>
                                    </div>
                                    <div class="layui-form">
                                        <ul class="layui-form-item">
                                            <li>
                                                <input type="checkbox" title="Transaction Amount" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Rise And Fall" lay-skin="primary" checked>
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Amplitude" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Increase" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="PSYMA" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Minimum Price" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="D-line" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Rising Days In Cycles" lay-skin="primary"
                                                       checked>
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Psychological Line" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="The Highest Price" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="K-line" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="RSV" lay-skin="primary">
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="layui-tab-item">
                                    <div class="checkbox-box layui-form">
                                        <ul class="layui-form-item">
                                            <li>
                                                <input type="checkbox" title="Correlation Coefficien" lay-skin="primary"
                                                       checked>
                                            </li>
                                            <li>
                                                <input type="checkbox" title="R Squared" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Adjusted R Squared" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="MSE" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="RMSE" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="MAE" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="RAE" lay-skin="primary">
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Retentuin Method" lay-skin="primary"
                                                       checked>
                                            </li>
                                            <li>
                                                <input type="checkbox" title="Cross Validation" lay-skin="primary">
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="main-box only-chart-box">
                        <div class="tip-box">
                            <div class="tip-title">
                                <label id="shanghai_title"></label>
                                <div class="update-box">
                                    <i class="fa fa-refresh" @click="refreshChart()" id="refresh-icon"></i>
                                    <label>Update time:</label>
                                    <label id="refresh-time"></label>
                                </div>
                            </div>
                            <div class="tip-body" id="chart1" style="height: 415px;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row left-right-position">
                    <div class="layui-col-xs3">
                        <div class="main-box">
                            <div class="tip-box">
                                <div class="tip-title">
                                    <label id="listTitle">Correlation Coefficient</label>
                                    <i class="fa fa-angle-double-right" style="float:right;line-height: 65px;"
                                       @click="showDialog()"></i>
                                </div>
                                <div class="tip-body">
                                    <div class="tip-table-box">
                                        <table class="layui-table" lay-skin="line">
                                            <tbody>
                                            <tr class="increase">
                                                <td>Maximum value</td>
                                                <td>+0.998</td>
                                            </tr>
                                            <tr class="increase">
                                                <td>Minimum value</td>
                                                <td>+0.998</td>
                                            </tr>
                                            <tr class="increase">
                                                <td>MA5</td>
                                                <td>+0.992</td>
                                            </tr>
                                            <tr class="increase">
                                                <td>MA10</td>
                                                <td>+0.985</td>
                                            </tr>
                                            <tr class="increase">
                                                <td>MA20</td>
                                                <td>+0.97</td>
                                            </tr>
                                            <tr class="increase">
                                                <td>MA50</td>
                                                <td>+0.916</td>
                                            </tr>
                                            <tr class="increase">
                                                <td>MarketPsych</td>
                                                <td>+0.556</td>
                                            </tr>
                                            <tr class="increase"><!--class="reduce"-->
                                                <td>Exchange rate</td>
                                                <td>+0.349</td>
                                            </tr>
                                            <tr class="increase">
                                                <td>Policy factor</td>
                                                <td>+0.127</td>
                                            </tr>
                                            <tr class="increase">
                                                <td>D</td>
                                                <td>+0.132</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs9">
                        <div class="main-box">
                            <div class="tip-box">
                                <div class="tip-body" id="chart0" style="height: 456px;">
                                    <img src="../images/chartBg.jpg" style="width: 100%; height: 100%;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-box">
            <button type="button" id="downlaod" @click="download()">
                <i class="icon-download"></i>Download
            </button>
            <a href="modelCalculation.html">
                <button type="button" value="Run Backtest" id="runBack">
                    <i class="icon-runBack"></i>Back
                </button>
            </a>
            <button type="button" value="Preservation" id="preservation" @click="saveAndBackToIndex()">
                <i class="icon-preservation"></i>Save
            </button>
        </div>
    </div>
</div>
<div id="dialogDiv">
    <div class="tips-box">
        <label>Please choose which category to</label>
    </div>
    <div class="input-box">
        <label>Save as:</label>
        <input type="text" placeholder="name" id="dialog-input" value="SSE-R">
    </div>
    <div class="select-box">
        <label>Save to:</label>
        <select class="select-item" id="dialog-select">
            <option value="Stock">Stock</option>
            <option value="Crude Oil">Crude Oil</option>
            <option value="Gold">Gold</option>
            <option value="Peak And Valley">Peak And Valley</option>
        </select>
    </div>
    <div class="button-box">
        <input type="button" value="OK" onclick="submit()"/>
        <input type="button" value="Cancel" onclick="cancel()"/>
    </div>
</div>
<div id="dialog-box1">
    <div class="main-box">
        <div class="tip-box">
            <div class="tip-title">
                <label>Correlation Coefficient</label>
                <i class="fa fa-close" style="float: right; line-height: 60px;" onclick="closeDialog()"></i>
            </div>
            <div class="tip-body dialog-content">
                <div class="tip-table-box">
                    <table class="layui-table" lay-skin="line">
                        <tbody>
                        <tr>
                            <td>Maximum value</td>
                            <td>+0.998</td>
                            <td>Shibor</td>
                            <td class="reduce">-0.264</td>
                            <td>TP(5)</td>
                            <td>+0.996</td>
                        </tr>
                        <tr>
                            <td>Minimum value</td>
                            <td>+0.998</td>
                            <td>CPI</td>
                            <td>+0.081</td>
                            <td>MA(5)</td>
                            <td>+0.992</td>
                        </tr>
                        <tr>
                            <td>MA5</td>
                            <td>+0.992</td>
                            <td>Reconstruction index</td>
                            <td>+0.244</td>
                            <td>MA-Closing price</td>
                            <td class="reduce">-0.003</td>
                        </tr>
                        <tr>
                            <td>MA10</td>
                            <td>+0.985</td>
                            <td>New Investors</td>
                            <td>+0.571</td>
                            <td>MD(5)</td>
                            <td class="reduce">-0.013</td>
                        </tr>
                        <tr>
                            <td>MA20</td>
                            <td>+0.97</td>
                            <td>Fringe market</td>
                            <td>+0.05</td>
                            <td>CCI (5day)</td>
                            <td>+0.011</td>
                        </tr>
                        <tr>
                            <td>MA50</td>
                            <td>+0.916</td>
                            <td>MA100</td>
                            <td>+0.82</td>
                            <td>TR</td>
                            <td>+0.446</td>
                        </tr>
                        <tr>
                            <td>MarketPsych</td>
                            <td>+0.556</td>
                            <td>MA200</td>
                            <td>+0.659</td>
                            <td>True fluctuation (ATR(14))</td>
                            <td>+0.526</td>
                        </tr>
                        <tr>
                            <td>Exchange rate</td>
                            <td>+0.349</td>
                            <td>Bias</td>
                            <td>+0.029</td>
                            <td>Highs/Lows</td>
                            <td>+0.168</td>
                        </tr>
                        <tr>
                            <td>Policy factor</td>
                            <td>+0.127</td>
                            <td>PSY(12)</td>
                            <td>+0.226</td>
                            <td>EMA (12)</td>
                            <td>+0.968</td>
                        </tr>
                        <tr>
                            <td>D</td>
                            <td>+0.132</td>
                            <td>PSYMA</td>
                            <td>+0.258</td>
                            <td>EMA (26)</td>
                            <td>+0.941</td>
                        </tr>
                        <tr>
                            <td>Ups and downs</td>
                            <td>+0.004</td>
                            <td>Rsv</td>
                            <td>+0.081</td>
                            <td>DIF</td>
                            <td class="reduce">-0.319</td>
                        </tr>
                        <tr>
                            <td>Gain</td>
                            <td>+0.016</td>
                            <td>K</td>
                            <td>+0.112</td>
                            <td>MACD(12,26)</td>
                            <td class="reduce">-0.337</td>
                        </tr>
                        <tr>
                            <td>Amplitude</td>
                            <td>+0.167</td>
                            <td>J</td>
                            <td>+0.068</td>
                            <td>Oil price</td>
                            <td class="reduce">-0.417</td>
                        </tr>
                        <tr>
                            <td>Total sum</td>
                            <td>+0.663</td>
                            <td>A(5)</td>
                            <td>+0.561</td>
                            <td>Gold price</td>
                            <td class="reduce">-0.252</td>
                        </tr>
                        <tr>
                            <td>Fear index</td>
                            <td>+0.148</td>
                            <td>A(5)+B(5)</td>
                            <td>+0.991</td>
                        </tr>
                        <tr>
                            <td>Sentiment index</td>
                            <td>+0.13</td>
                            <td>RSI (N)</td>
                            <td>+0.148</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/layui/layui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/echarts.min.js"></script>
<script type="text/javascript">
    layui.use(['element', 'form', 'laydate'], function () {
        var element = layui.element;
        var form = layui.form;
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#date1', //指定元素
            format: 'MM dd,yyyy',
            value: '01 02,2008',
            showBottom: false,
            position: "fixed"
        });
        laydate.render({
            elem: '#date2', //指定元素
            format: 'MM dd,yyyy',
            value: '01 06,2019',
            showBottom: false,
            position: "fixed"
        });
        laydate.render({
            elem: '#date3', //指定元素
            format: 'MM dd,yyyy',
            value: '01 07,2019',
            showBottom: false,
            position: "fixed"
        });
        laydate.render({
            elem: '#date4', //指定元素
            format: 'MM dd,yyyy',
            value: '01 09,2019',
            showBottom: false,
            position: "fixed"
        });
    });

    window.onload = function (ev) {
        var now = new Date();
        var nowStr = (now.getMonth() + 1) + "/" + now.getDate() + "/" + now.getFullYear() + " " + now.getHours() + ":" + now.getMinutes();
        $("#shanghai_title").html("12/01/2018-" + nowStr + " Shanghai Composite Index Regression Forecast");
        $("#refresh-time").html(nowStr);
        /*var width = $("#listTitle").parent(".tip-title").width();
        console.log(width)
        if (width < 350) {
            $("#listTitle").html("Market Sentiment");
        } else {
            $("#listTitle").html("2018/12/02-2019/01/02 Market Sentiment");
        }*/
    }

    function submit() {
        window.location.href = encodeURI("../index.html?chartJson=true&name=" + $("#dialog-input").val());
    }

    function cancel() {
        $("#dialogDiv").hide();
    }

    function hideContent(a) {
        if (($(a).attr("class")).indexOf("up") > 0) {
            $(".layui-tab-content").hide();
            $(a).attr("class", "fa fa-chevron-down");
        } else {
            $(".layui-tab-content").show();
            $(a).attr("class", "fa fa-chevron-up");
        }
    }

    function closeDialog() {
        $("#dialog-box1").hide();
    }

    var chart0, chart1;
    var mainVue = new Vue({
        el: '#box',
        data: {
            chartJson: {}
        },
        mounted: function () {
            var _this = this;
            /*chart0 = echarts.init(document.getElementById("chart0"));*/
            /*this.initChart0();*/
            this.initChart1();
            /*var arr = [0.998, 0.998, 0.992, 0.985, 0.97, 0.916, 0.556, 0.349, 0.127, 0.132];
            var result = [];
            for (var i in arr) {
                var randomArr = [];
                for (var j = 0; j < 17; j++) {
                    randomArr.push((arr[i] + (Math.random() * 0.06 - 0.03)).toFixed(3));
                }
                result.push(randomArr);
            }
            console.log(JSON.stringify(result));*/
        },
        methods: {
            download: function () {
                setTimeout(function () {
                    var $eleForm = $("<form method='get'></form>");
                    $eleForm.attr("action", "../file/SSE-R.xlsx");
                    $(document.body).append($eleForm);
                    //提交表单，实现下载
                    $eleForm.submit();
                }, 1300);
            },
            saveAndBackToIndex: function () {
                $("#dialogDiv").show();
            },
            refreshChart: function () {
                var _this = this;
                $("#refresh-icon").addClass("transform");
                setTimeout(function () {
                    _this.initChart1();
                    $("#refresh-icon").removeClass("transform");
                    var now = new Date();
                    var nowStr = (now.getMonth() + 1) + "/" + now.getDate() + "/" + now.getFullYear() + " " + now.getHours() + ":" + now.getMinutes();
                    $("#shanghai_title").html("12/01/2018-" + nowStr + " Shanghai Composite Index Regression Forecast");
                    $("#refresh-time").html(nowStr);
                }, 900)
            },
            showDialog: function () {
                $("#dialog-box1").show();
            },
            initChart0: function () {
                $.get('../json/resultIndex.json', function (result) {
                    var dataArr = result.data;
                    var option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            top: '3%',
                            left: '2%',
                            right: '2%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            axisLabel: {
                                textStyle: {
                                    color: '#878787',
                                    fontSize: '14',
                                    fontWeight: 800
                                }
                            },
                            boundaryGap: false,
                            data: ['0.0', '0.2', '0.4', '0.6', '0.8', '1.0', '1.2', '1.4', '1.6', '1.8', '2.0', '2.2', '2.4', '2.6', '2.8', '3.0', '3.2'],
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                textStyle: {
                                    color: '#878787',
                                    fontSize: '14',
                                    fontWeight: 800
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(51, 51, 51, 0.7)'
                                }
                            },
                            min: 0,
                            max: 1.2
                        },
                        series: [
                            {
                                name: 'Maximum value',
                                type: 'line',
                                data: dataArr[0],
                                smooth: true,
                                showSymbol: false
                            }, {
                                name: 'Minimum value',
                                type: 'line',
                                data: dataArr[1],
                                smooth: true,
                                showSymbol: false
                            }, {
                                name: 'MA5',
                                type: 'line',
                                data: dataArr[2],
                                smooth: true,
                                showSymbol: false
                            }, {
                                name: 'MA10',
                                type: 'line',
                                data: dataArr[3],
                                smooth: true,
                                showSymbol: false
                            },
                            {
                                name: 'MA20',
                                type: 'line',
                                data: dataArr[4],
                                smooth: true,
                                showSymbol: false
                            }, {
                                name: 'MA50',
                                type: 'line',
                                data: dataArr[5],
                                smooth: true,
                                showSymbol: false
                            }, {
                                name: 'total',
                                type: 'line',
                                data: dataArr[6],
                                smooth: true,
                                showSymbol: false
                            }, {
                                name: 'Exchange rate',
                                type: 'line',
                                data: dataArr[7],
                                smooth: true,
                                showSymbol: false
                            },
                            {
                                name: 'Policy factor',
                                type: 'line',
                                data: dataArr[8],
                                smooth: true,
                                showSymbol: false
                            }, {
                                name: 'D',
                                type: 'line',
                                data: dataArr[9],
                                smooth: true,
                                showSymbol: false
                            }
                        ]
                    };
                    chart0.setOption(option);
                });
            },
            initChart1: function () {
                var _this = this;
                $("#chart1").attr("_echarts_instance_", "");
                chart1 = echarts.init(document.getElementById("chart1"));
                $.get('../json/large_market_forecast2.json', function (rowData) {
                    _this.chartJson = rowData;
                    var xData = rowData.data;
                    var actualData = rowData.actual;
                    var predictedData = rowData.predicted;
                    var marketPsychData = rowData.marketPsych;
                    var sentimentData = rowData.sentiment;
                    var option = {
                        title: {
                            text: "Shanghai Composite Index",
                            textStyle: {
                                color: '#878787',
                            }
                        },
                        legend: {
                            textStyle: {
                                color: '#878787',
                            },
                            right: 25,
                            icon: "rect",
                            itemWidth: 10,
                            itemHeight: 10,
                            itemGap: 40,
                            data: ["Actual Value", "Predicted Value", 'MarketPsych', 'Sentiment']
                        },
                        color: ['#128fff', '#05cb91', '#fcc761', '#f54f77'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            },
                        },
                        grid: {
                            top: "40px",
                            left: '30px',
                            right: '35px',
                            bottom: '30px',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            splitLine: {show: false},
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#878787',
                                    fontSize: '14',
                                    fontWeight: 800
                                }
                            },
                            data: xData
                        },
                        yAxis: [{
                            axisLine: {show: false},
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(51, 51, 51, 0.7)'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#878787',
                                    fontSize: '14',
                                    fontWeight: 800
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            min: function (value) {
                                return value.min - 150;
                            },
                            max: function (value) {
                                return value.max + 150;
                            }
                        }, {
                            axisLine: {show: false},
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'dashed',
                                    color: 'rgba(51, 51, 51, 0.7)'
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#878787',
                                    fontSize: '14',
                                    fontWeight: 800
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        }],
                        series: [{
                            name: "Actual Value",
                            type: 'line',
                            showSymbol: false,
                            data: actualData,
                            lineStyle: {
                                color: '#128fff'
                            }
                        }, {
                            name: "Predicted Value",
                            type: 'line',
                            showSymbol: false,
                            data: predictedData,
                            lineStyle: {
                                color: '#05cb91'
                            }
                        }, {
                            yAxisIndex: 1,
                            name: 'MarketPsych',
                            type: 'line',
                            showSymbol: false,
                            data: marketPsychData,
                            lineStyle: {
                                color: '#fcc761'
                            },
                        }, {
                            yAxisIndex: 1,
                            name: 'Sentiment',
                            type: 'line',
                            showSymbol: false,
                            data: sentimentData,
                            lineStyle: {
                                color: '#f54f77'
                            }
                        }]
                    };
                    chart1.setOption(option, true);
                });
            },
            openTip: function (e) {
                var $target = $(e.currentTarget);
                var className = $target.attr("class");
                if (className == "fa fa-plus") {
                    $target.next("ul").attr("style", "");
                    $target.attr("class", "fa fa-minus");
                } else if (className == "fa fa-minus") {
                    $target.next("ul").attr("style", "height:0;overflow: hidden;");
                    $target.attr("class", "fa fa-plus");
                }

            }
        }
    });
    $(function () {
        $(".span-item span").click(function () {
            if ($(this).attr("class") == "span-checked") {
                $(this).removeClass("span-checked");
            } else {
                $(this).addClass("span-checked");
            }
        });

        $("#allCheck span").addClass("span-checked");
    });
</script>
</body>
</html>